<template>
  <div id="app">
    <v-header :seller="seller"></v-header>
    <div class="tab">
      <router-link :to="{path : '/goods'}" class="tab-item">商品</router-link>
      <router-link :to="{path : '/ratings'}" class="tab-item">评价</router-link>
      <router-link :to="{path : '/seller'}" class="tab-item">商家</router-link>
    </div>
    <keep-alive>
      <router-view :seller="seller"></router-view>
    </keep-alive>
  </div>
</template>

<script type="text/ecmascript-6">
  import svc from './common/js/service'
  import Header from './components/header/Header.vue'

  export default {
    data () {
      return {
        // 商家信息
        seller: {}
      }
    },
    components: {
      'v-header': Header
    },
    methods: {
      // 获取商家信息
      fnGetSeller () {
        let that = this
        svc.fnGetData('/api/seller', {}, function (res) {
          if (res.body.ErrCode === 0) {
            that.seller = res.body.Data
          }
        })
      }
    },
    mounted () {
      // 获取商家信息
      this.fnGetSeller()
    }
  }
</script>

<style lang="scss" scoped>
  #app {
    .tab {
      display: flex;
      width:100%;
      height:40px;
      line-height:40px;
      border-bottom:1px solid rgba(7,17,27,.1);
      .tab-item {
        flex: 1;
        text-align: center;
        font-size:14px;
        color: rgb(77,85,93);
      }

      .active {
        color: rgb(240, 20, 20);
      }
    }
  }
</style>
